<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
   <div style="display:flex;height:50%">
      <div class="box-1" style="height:50%;width:50%;" ref='gm'>
        <div class="section-header">企业规模</div>
        <div ref="charts" :style="chartsDom" v-show="jz"></div>
       <animae-jz   v-if="!jz"></animae-jz>
      </div>
      <div class="box-1" style="height:50%;width:50%;" ref='lx'>
        <div class="section-header">工商类型</div>
        <div ref="chartslx" :style="chartsDom" v-show="jz2"></div>
        <animae-jz  v-if="!jz2"></animae-jz>
      </div>
   </div>
   <div style="display:flex;height:50%">
      <div class="box-1" style="height:50%;width:50%;" ref='xz'>
        <div class="section-header">三医两养</div>
        <div ref="chartsxz"  :style="chartsDom"  v-show="jz3"></div>
        <animae-jz  v-if="!jz3"></animae-jz>
      </div>
      <div class="box-1" style="height:50%;width:50%;" ref='cy'>
        <div class="section-header">所属产业</div>
        <div ref="chartscy" :style="chartsDom" v-show="jz4"></div>
        <animae-jz  v-if="!jz4"></animae-jz>
      </div>
   </div>
  </div>
</template>
<script>

import { informatization } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      jz:true,
      jz2:true,
      jz3:true,
      jz4:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 10 + 'px',
        height: this.height-50 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
      this.jz2=false
      this.jz3=false
      this.jz4=false
      informatization(this.dateProp).then(({data:{data}})=>{
      this.jz=true
      this.jz2=true
      this.jz3=true
      this.jz4=true
         this.drawChart(data.enterprise_scale);
        this.drawChartlx(data.enterprise_type)
        this.drawChartxz(data.enterprise_sanyi)
        this.drawChartcy(data.enterprise_profession)
      })
    },
   drawChart(dataa) {
      let option = {
           tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {c} ({d}%)'
           },
      //      legend: {
      					// orient: 'vertical',
      					// right:'50%',
      					// data: dataa.map(v=>v.name),
      					// textStyle: {
      					// 	color: '#8ebafb',
      					// 	fontSize: 8
      //      }},
           tooltip:{
             trigger:'item'
           },
           series: [
               {
                   name: '企业规模',
                   type: 'pie',
                   radius:'24%',
                   label: {
                       show: false,
                   },
                   center: ['25%', '25%'],
      				    label: {
      				                  formatter: ' {b|{b}}\n{c}家\n{per|{d}%}  ',
      				                  rich: {
      				                      b: {
      				                          fontSize: 12,
      				                          lineHeight: 12
      				                      },
      				                      per: {
      				                          color: '#fff',
      				                      }
      				                  }
      				              },
                   data: dataa,
                   emphasis: {
                       itemStyle: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       },
                   //     label: {
                   //         show: true,
                   //         fontSize: '10',
                   //         fontWeight: 'bold'
                   //     },
                   //     labelLine: {
                   //     show: true
                   // },
                   },
                   
                   color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#9400D3'],
               }
           ]
       }
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    },
    drawChartlx(dataa) {
 let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)',
               position: function (point, params, dom, rect, size) {
                    return [point[0], '20%'];
                }
          },
     //      legend: {
					// orient: 'vertical',
					// right:'50%',
					// data: dataa.map(v=>v.name),
					// textStyle: {
					// 	color: '#8ebafb',
					// 	fontSize: 8
     //      }},
          tooltip:{
            trigger:'item'
          },
          series: [
              {
                  name: '工商类型',
                  type: 'pie',
                  radius:'23%',
                  label: {
                      show: false,
                  },
                  center: ['26%', '25%'],
				    label: {
				                  formatter: ' {b|{b}}\n{c}家\n{per|{d}%}  ',
				                  rich: {
				                      b: {
				                          fontSize: 12,
				                          lineHeight: 12
				                      },
				                      per: {
				                          color: '#fff',
				                      }
				                  }
				              },
                  data: dataa,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                  //     label: {
                  //         show: true,
                  //         fontSize: '10',
                  //         fontWeight: 'bold'
                  //     },
                  //     labelLine: {
                  //     show: true
                  // },
                  },
                  
                  color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#9400D3'],
              }
          ]
      }
      let chartsInitlx = this.$echarts.init(this.$refs.chartslx);
      chartsInitlx.setOption(option);
    },
    drawChartxz(dataa) {
      let option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)',
               position: function (point, params, dom, rect, size) {
                    return [point[0], '20%'];
                }
          },
     //      legend: {
					// orient: 'vertical',
					// right:'50%',
					// data: dataa.map(v=>v.name),
					// textStyle: {
					// 	color: '#8ebafb',
					// 	fontSize: 8
     //      }},
          tooltip:{
            trigger:'item'
          },
          series: [
              {
                  name: '三医两养',
                  type: 'pie',
                  radius:'24%',
                  label: {
                      show: false,
                  },
                  center: ['25%', '25%'],
				    label: {
				                  formatter: ' {b|{b}}\n{c}家\n{per|{d}%}  ',
				                  rich: {
				                      b: {
				                          fontSize: 12,
				                          lineHeight: 12
				                      },
				                      per: {
				                          color: '#fff',
				                      }
				                  }
				              },
                  data: dataa,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      },
                  //     label: {
                  //         show: true,
                  //         fontSize: '10',
                  //         fontWeight: 'bold'
                  //     },
                  //     labelLine: {
                  //     show: true
                  // },
                  },
                  
                  color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#9400D3'],
              }
          ]
      }
      let chartsInitxz = this.$echarts.init(this.$refs.chartsxz);
      chartsInitxz.setOption(option);
    },
    drawChartcy(dataa) {
      let option = {
           tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {c} ({d}%)',
                position: function (point, params, dom, rect, size) {
                     return [point[0], '20%'];
                 }
           },
      //      legend: {
      					// orient: 'vertical',
      					// right:'50%',
      					// data: dataa.map(v=>v.name),
      					// textStyle: {
      					// 	color: '#8ebafb',
      					// 	fontSize: 8
      //      }},
           tooltip:{
             trigger:'item'
           },
           series: [
               {
                   name: '所属产业',
                   type: 'pie',
                   radius:'24%',
                   label: {
                       show: false,
                   },
                   center: ['26%', '25%'],
      				    label: {
      				                  formatter: ' {b|{b}}\n{c}家\n{per|{d}%}  ',
      				                  rich: {
      				                      b: {
      				                          fontSize: 12,
      				                          lineHeight: 12
      				                      },
      				                      per: {
      				                          color: '#fff',
      				                      }
      				                  }
      				              },
                   data: dataa,
                   emphasis: {
                       itemStyle: {
                           shadowBlur: 10,
                           shadowOffsetX: 0,
                           shadowColor: 'rgba(0, 0, 0, 0.5)'
                       },
                   //     label: {
                   //         show: true,
                   //         fontSize: '10',
                   //         fontWeight: 'bold'
                   //     },
                   //     labelLine: {
                   //     show: true
                   // },
                   },
                   
                   color: ['#fb7293','#ff9f7f','#ffdb5c','#9fe6b8','#9400D3'],
               }
           ]
       }
      let chartsInitxz = this.$echarts.init(this.$refs.chartscy);
      chartsInitxz.setOption(option);
    }
  },
  
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>